<template>
  <div class="my_idle">
    <head-top head-title="我的发布" goBack="true"></head-top>
    <ul>
      <!--论坛-->
      <li v-if="forum.length">
        <h2 class="title">论坛（{{forum.length}}）</h2>
        <ul>
          <li class="content" v-for="(list,index) in forum" :key="index">
            <div class="img-desc border-bottom" @click="$router.push('/my/IdleDetail/'+list.group_name+'/'+list.id)">
              <div class="img" v-lazy:background-image="list.img[0]" v-show="list.img[0]"></div>
              <img src="../../assets/imgDefault.png" alt="" v-show="!list.img[0]">
              <div class="desc-wrapper">
                <div>
                  <p class="text">{{list.content}}</p>
                  <p class="address">{{list.areas_name}}</p>
                  <p class="time">{{list.create_time*1000 | dateFmt('YYYY-MM-DD HH:mm:ss' )}}</p>
                </div>
              </div>
            </div>
            <div class="status-del-edit">
              <div class="status">
                <!-- 状态：<span class="slove">已处理</span>
                <span class="no-slove">未处理</span>
                <span class="btn">修改状态</span> -->
              </div>
              <div class="del-edit">
                <!-- <div class="edit" @click="editBtn">
                  <span class='edit-icon'></span>
                  <span class="edit-text">编辑</span>
                </div> -->
                <div class="del" @click="deleteBtn(list.group_name,list.id)">
                  <span class='del-icon'></span>
                  <span class="del-text">删除</span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <!-- 邻里闲置 -->
      <li v-if="goods.length">
        <h2 class="title">闲置商品（{{goods.length}}）</h2>
        <ul>
          <li class="content" v-for="(list,index) in goods" :key="index">
            <div class="img-desc border-bottom" @click="$router.push('/my/IdleDetail/'+list.group_name+'/'+list.id)">
              <div class="img" v-lazy:background-image="list.img[0]" v-show="list.img[0]"></div>
              <img src="../../assets/imgDefault.png" alt="" v-show="!list.img[0]">
              <div class="desc-wrapper">
                <div>
                  <p class="text">{{list.content}}</p>
                  <p class="address">{{list.areas_name}}</p>
                  <p class="time">{{list.create_time*1000 | dateFmt('YYYY-MM-DD HH:mm:ss' )}}</p>
                </div>
              </div>
            </div>
            <div class="status-del-edit">
              <div class="status">
                <!-- 状态：<span class="slove">已处理</span>
                <span class="no-slove">未处理</span>
                <span class="btn">修改状态</span> -->
              </div>
              <div class="del-edit">
                <!-- <div class="edit" @click="editBtn">
                  <span class='edit-icon'></span>
                  <span class="edit-text">编辑</span>
                </div> -->
                <div class="del" @click="deleteBtn(list.group_name,list.id)">
                  <span class='del-icon'></span>
                  <span class="del-text">删除</span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <!-- 邻里救助 -->
      <li v-if="neighbor.length">
        <h2 class="title">邻里求助（{{neighbor.length}}）</h2>
        <ul>
          <li class="content" v-for="(list,index) in neighbor" :key="index">
            <div class="img-desc border-bottom" @click="$router.push('/my/IdleDetail/'+list.group_name+'/'+list.id)">
              <div class="img" v-lazy:background-image="list.img[0]" v-show="list.img[0]"></div>
              <img src="../../assets/imgDefault.png" alt="" v-show="!list.img[0]">
              <div class="desc-wrapper">
                <div>
                  <p class="text">{{list.content}}</p>
                  <p class="address">{{list.areas_name}}</p>
                  <p class="time">{{list.create_time*1000 | dateFmt('YYYY-MM-DD HH:mm:ss' )}}</p>
                </div>
              </div>
            </div>
            <div class="status-del-edit">
              <div class="status">
                <!-- 状态：<span class="slove">已处理</span>
                <span class="no-slove">未处理</span>
                <span class="btn">修改状态</span> -->
              </div>
              <div class="del-edit">
                <!-- <div class="edit" @click="editBtn">
                  <span class='edit-icon'></span>
                  <span class="edit-text">编辑</span>
                </div> -->
                <div class="del" @click="deleteBtn(list.group_name,list.id)">
                  <span class='del-icon'></span>
                  <span class="del-text">删除</span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <!-- 房屋租售 -->
      <li v-if="house.length">
        <h2 class="title">房屋租售（{{house.length}}）</h2>
        <ul>
          <li class="content" v-for="(list,index) in house" :key="index">
            <div class="img-desc border-bottom" @click="$router.push('/my/IdleDetail/'+list.group_name+'/'+list.id)">
              <div class="img" v-lazy:background-image="list.img[0]" v-show="list.img[0]"></div>
              <img src="../../assets/imgDefault.png" alt="" v-show="!list.img[0]">
              <div class="desc-wrapper">
                <div>
                  <p class="text">{{list.content}}</p>
                  <p class="address">{{list.placeName+'-'+list.areas_name}}</p>
                  <p class="time">{{list.create_time*1000 | dateFmt('YYYY-MM-DD HH:mm:ss' )}}</p>
                </div>
              </div>
            </div>
            <div class="status-del-edit">
              <div class="status">
                <!-- 状态：<span class="slove">已处理</span>
                <span class="no-slove">未处理</span>
                <span class="btn">修改状态</span> -->
              </div>
              <div class="del-edit">
                <!-- <div class="edit" @click="editBtn">
                  <span class='edit-icon'></span>
                  <span class="edit-text">编辑</span>
                </div> -->
                <div class="del" @click="deleteBtn(list.group_name,list.id)">
                  <span class='del-icon'></span>
                  <span class="del-text">删除</span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <!-- 物业报修 -->
      <li v-if="repair.length">
        <h2 class="title">物业报修（{{repair.length}}）</h2>
        <ul>
          <li class="content" v-for="(list,index) in repair" :key="index">
            <div class="img-desc border-bottom" @click="$router.push('/my/IdleDetail/'+list.group_name+'/'+list.id)">
              <div class="img" v-lazy:background-image="list.img[0]" v-show="list.img[0]"></div>
              <img src="../../assets/imgDefault.png" alt="" v-show="!list.img[0]">
              <div class="desc-wrapper">
                <div>
                  <p class="text">{{list.content}}</p>
                  <p class="address">{{list.areas_name}}</p>
                  <p class="time">{{list.create_time*1000 | dateFmt('YYYY-MM-DD HH:mm:ss' )}}</p>
                </div>
              </div>
            </div>
            <div class="status-del-edit">
              <div class="status">
                状态：<span class="slove" v-show="list.status===0">已处理</span>
                <span class="no-slove" v-show="list.status===1">未处理</span>
                <span class="btn" v-show="list.status===1" @click="changeBtn(list.group_name,list.id)">修改状态</span>
              </div>
              <div class="del-edit">
                <!-- <div class="edit" @click="editBtn">
                  <span class='edit-icon'></span>
                  <span class="edit-text">编辑</span>
                </div> -->
                <div class="del" @click="deleteBtn(list.group_name,list.id)">
                  <span class='del-icon'></span>
                  <span class="del-text">删除</span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
    <div class="noRlist" v-show="noResult">
      <p>抱歉！暂无发布或已全部删除</p>
    </div>
  </div>
</template>
<style lang="scss">
  @import "../../common/sass/mixin.scss";

  .my_idle {
    padding-top: 40px;
    ul {
      li {
        .title {
          padding: 0 10px;
          height: 40px;
          line-height: 40px;
          font-size: 14px;
          background-color: #f2f2f2;
        }
        ul {
          .content {
            border-bottom: 10px solid #f2f2f2;
            &:last-child {
              border-bottom: none;
            }
            .img-desc {
              margin: 0 10px;
              display: flex;
              padding: 5px 0;
              .img {
                flex: 0 0 63px;
                width: 63px;
                height: 63px;
                margin-right: 10px;
                background-size: cover;
                background-repeat: no-repeat;
              }
              img {
                width: 63px;
                height: 63px;
                margin-right: 10px;
              }
              .desc-wrapper {
                flex: 1;
                display: flex;
                align-items: center;
                .text {
                  font-size: 15px;
                  margin-bottom: 10px;
                  @include ellipsis(1);
                }
                .address {
                  color: #666;
                }
                .time {
                  margin-top: 10px;
                  color: #999999;
                }
              }
            }
            .status-del-edit {
              display: flex;
              margin: 0 10px;
              height: 30px;
              align-items: center;
              .status {
                flex: 1;
                .slove {
                  color: green;
                }
                .no-slove {
                  color: red;
                }
                .btn {
                  padding: 3px 5px;
                  border: 1px solid #0078de;
                  border-radius: 3px;
                }
              }
              .del-edit {
                flex: 1;
                text-align: right;
                .del {
                  display: inline-block;
                  .del-icon {
                    display: inline-block;
                    width: 14px;
                    height: 15px;
                    background-size: 14px 15px;
                    @include bgimg('./images/shuanchu');
                    background-repeat: no-repeat;
                    vertical-align: middle;
                    margin-right: 5px;
                  }
                }
                .edit {
                  display: inline-block;
                  margin-right: 10px;
                  .edit-icon {
                    display: inline-block;
                    width: 14px;
                    height: 15px;
                    background-size: 14px 15px;
                    @include bgimg('./images/bianji');
                    background-repeat: no-repeat;
                    vertical-align: middle;
                    margin-right: 5px;
                  }
                }
              }
            }
          }
        }
      }
    }
    .noRlist {
      width: 100%;
      flex: 1;
      display: inline-flex;
      padding-top: 0;
      justify-content: center;
      align-items: center;
      background: url("../../assets/default.png") no-repeat #fff;
      background-size: 100px 100px;
      background-position: center;
      padding-bottom: 20px;
      p {
        font-size: 15px;
        color: #0b7ad9;
        margin-top: 190px;
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import { getMyIdle } from '../../api/publishList.js'
  import { Toast, Indicator } from 'mint-ui'
  import commonUrl from '../../common/js/commonUrl.js'
  import qs from 'qs'
  import data from '../../../static/data.json'

  export default {
    name: 'MyIdle',
    data () {
      return {
        forum: [],
        goods: [],
        neighbor: [],
        house: [],
        repair: [],
        noResult: false,
        province: '',
        city: '',
        district: ''
      }
    },
    components: {
      headTop
    },
    // 设置缓存从哪个页面返回
    beforeRouteEnter: (to, from, next) => {
      if (from.name === 'IdleDetail') {
        to.meta.isBack = true
      }
      next()
    },
    activated () {
      if (!this.$route.meta.isBack) {
        Indicator.open({
          text: '加载中...',
          spinnerType: 'fading-circle'
        })
        this._getMyIdle()
        setTimeout(function () {
          Indicator.close()
        }, 5000)
      }
      this.$route.meta.isBack = false
    },
    methods: {
      _getMyIdle () {
        this.noResult = false
        getMyIdle().then(res => {
          if (res.code === 200) {
            Indicator.close()
            this.forum = res.data.forum
            this.goods = res.data.goods
            this.neighbor = res.data.neighbor
            this.house = res.data.rent_house
            this.repair = res.data.repair
            for (var i = 0; i < this.house.length; i++) {
              this.province = this.house[i].province
              this.city = this.house[i].city
              this.district = this.house[i].district
              for (var j = 0; j < data.length; j++) {
                if (this.province == data[j].code) {
                  var pName = data[j].name // 省
                  var cdata = data[j].childs
                  cdata.map(res => {
                    if (this.city == res.code) {
                      var cName = res.name // 市
                      var adata = res.childs
                      adata.map(res => {
                        if (this.district == res.code) {
                          var aName = res.name// 区
                          this.house[i]['placeName'] = pName + '-' + cName + '-' + aName
                        }
                      })
                    }
                  })
                }
              }
            }
          }
          if (this.forum.length === 0 && this.goods.length === 0 && this.neighbor.length === 0 && this.house.length === 0 && this.repair.length === 0) {
            this.noResult = true
          } else {
            this.noResult = false
          }
        })
      },
      // editBtn () {
      //   Toast({
      //     message: '编辑暂未开通',
      //     position: 'middle',
      //     duration: 2000
      //   })
      // },
      deleteBtn (type, id) {
        const url = `${commonUrl.apihost}index.php/home/personal/delete`
        const data = {
          type: type,
          id: id
        }
        this.$http.post(url, qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
          // console.log(res)
          if (res.data.code === 200) {
            this._getMyIdle()
            Toast({
              message: res.data.data,
              position: 'middle',
              duration: 2000
            })
          }
        })
      },
      changeBtn (type, id) {
        const url = `${commonUrl.apihost}/index.php/home/personal/handleNeighbor`
        const data = {
          type: type,
          id: id
        }
        this.$http.post(url, qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
          // console.log(res)
          if (res.data.code === 200) {
            this._getMyIdle()
            Toast({
              message: res.data.data,
              position: 'middle',
              duration: 2000
            })
          }
        })
      }
    }
  }
</script>
